<template>
	<view class="xzfx-popup" :class="[show ? 'entry' : 'leave']" @click.stop="closeFn">
		<view class="xzfx-popup-box" @click.stop="" >
			<view class="xzfx-popup-head">
				<view class="xzfx-popup-close xzfx_icon_close" @click.stop="closeFn"></view>
				<view class="xzfx-popup-title">{{ title }}</view>
			</view>
			<view class="xzfx-popup-content">
				<slot></slot>
			</view>
			<view class="xzfx-popup-action">
				<view class="btn" @click.stop="$emit('submit')">确 认</view>
			</view>
			<view v-if="tip.show" class="xzfx-popup-tip">
				<view class="icon" :class="'xzfx_icon_' + tip.type"></view>
				<view class="text">{{ tip.text }}</view>
			</view>
			<view v-if="loading.show" class="xzfx-popup-loading">
				<view class="icon"></view>
				<view class="text">{{ loading.text }}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name: "xzfx-popup",
		props: {
			title: {
				type: String,
				default: "弹出层"
			}
		},
		data() {
			return {
				show: true,
				loading: {
					show: false,
					text: "弹出层"
				},
				tip: {
					show: false,
					type: "",
					text: "弹出层"
				}
			}
		},
		methods: {
			closeFn() {
				this.show = false;
				setTimeout(() => {
					this.$emit("close");
				}, 200)
			},
			tipFn(type, text) {
				this.tip = {
					show: true,
					type: type,
					text: text
				}
				setTimeout(() => {
					this.tip = {
						show: false,
						type: "",
						text: ""
					}
				}, 1500)
			},
			loadingFn(text){
				this.loading = {
					show: true,
					text: text
				}
			},
			loadingCloseFn(){
				this.loading = {
					show: false,
					text: ""
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.xzfx-popup {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1000;
		width: 100%;
		height: 100vh;

		.xzfx-popup-box {
			background-color: #FFFFFF;
			width: 100%;
			position: absolute;
			bottom: 0;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			padding-top: 20rpx;
			.xzfx-popup-head{
				display: flex;
				align-items: center;
				padding: 0 20rpx;
				.xzfx-popup-close{
					width: 80rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-weight: 400;
					color: #333333;
				}
				.xzfx-popup-title{
					width: calc(100% - 160rpx);
					text-align: center;
					text-overflow: ellipsis;
					white-space: nowrap;
					overflow: hidden;
					padding: 0 30rpx;
					font-weight: 700;
					font-size: 32rpx;
					color: #333333;
				}
			}
			.xzfx-popup-content{
				width: 100%;
				min-height: 200rpx;
				max-height: 65vh;
				overflow: auto;
			}
			.xzfx-popup-action{
				width: 100%;
				background-color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 50rpx 30rpx 80rpx 30rpx;
				.btn{
					min-width: 280rpx;
					padding: 0 40rpx;
					height: 90rpx;
					border-radius: 15rpx;
					color: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
					background-color: $xzfx-theme;
					border: 1rpx solid $xzfx-theme;
					margin: 0 30rpx;
					font-size: 30rpx;
					font-weight: 700;
				}
			}
			.xzfx-popup-tip{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 1200;
				background-color: rgba(0, 0, 0, 0.8);
				border-top-left-radius: 50rpx;
				border-top-right-radius: 50rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				padding: 30rpx;
				.icon{
					font-size: 150rpx;
				}
				.text{
					margin-top: 20rpx;
					font-size: 28rpx;
				}
			}
			.xzfx-popup-loading{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				z-index: 1200;
				background-color: rgba(0, 0, 0, 0.8);
				border-top-left-radius: 50rpx;
				border-top-right-radius: 50rpx;
				color: #FFFFFF;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
				.icon{
					border: 15rpx solid rgba(0, 0, 0, 0.01);
					border-radius: 50%;
					border-top: 15rpx solid #fff;
					border-right: 15rpx solid #fff;
					border-bottom: 15rpx solid #fff;
					width: 150rpx;
					height: 150rpx;
					-webkit-animation: xzfx-popup-spin 1.4s linear infinite;
					animation: xzfx-popup-spin 1.4s linear infinite;
				}
				.text{
					margin-top: 20rpx;
					font-size: 28rpx;
				}
			}
		}

	}
	
	.entry{
		animation: xzfx-popup-entry .3s;
		animation-fill-mode: forwards;
		.xzfx-popup-box{
			animation: xzfx-popup-box-entry .5s;
			animation-fill-mode: forwards;
		}
	}
	.leave{
		animation: xzfx-popup-leave .3s;
		animation-fill-mode: forwards;
		.xzfx-popup-box{
			animation: xzfx-popup-box-leave .5s;
			animation-fill-mode: forwards;
		}
	}

	@keyframes xzfx-popup-entry {
		from {
			opacity: 0;
			background-color: rgba(0, 0, 0, 0);
		}

		to {
			opacity: 1;
			background-color: rgba(0, 0, 0, 0.8);
		}
	}
	
	@keyframes xzfx-popup-box-entry {
		from {
			bottom: -300rpx;
		}
			
		to {
			bottom: 0;
		}
	}
	
	@keyframes xzfx-popup-leave {
		from {
			opacity: 1;
			background-color: rgba(0, 0, 0, 0.8);
		}
	
		to {
			opacity: 0;
			background-color: rgba(0, 0, 0, 0);
		}
	}
	
	@keyframes xzfx-popup-box-leave {
		from {
			bottom: 0;
		}
			
		to {
			bottom: -300rpx;
		}
	}
	
	@keyframes xzfx-popup-spin {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}
</style>
